<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		
	</head>
	<body>
		<div id="app">
			<h1>{{hello.split('').reverse().join('')}}</h1>
			<h3 style="border:11px solid red">{{words}}</h3>
			<a href="#">{{site}}</a>
			<form>
				<fieldset >基本信息
				<p>
					<label>姓名</label>
					<input type="text" name="aname" v-model="aname" />
				</p>
				<p>您输入的是:{{aname}}</p>
				</fieldset>
			</form>
			<p>
				{{student.name}},{{student.age+20}}
			</p>
			<p>
				{{'hello'}}
			</p>
			<button type="button" @click="chgTitle">修改标题</button>
		</div>
		
		<script>
		 var vm=new Vue({
			el:'#app',
			data:{
				hello:"welcome to vue's world",
				site:"https://cn.vuejs.org",
				words:null,
				aname:'无名',
				student:{
					name:"马聪宝",
					age:22
				}
			},
			methods:{
				chgTitle:function(){
					alert(this.aname);
					this.hello=window.prompt("请输入标题",this.hello);
				}
			}
		 });
		</script>
	</body>
</html>
